<template>
  <div class="container">
    <div class="logo">
      <img src="https://picsum.photos/200/200?random=2" alt="注册Logo" />
      <h1>用户注册</h1>
    </div>
    <div class="form-container">
      <van-form>
        <van-field
          v-model="form.username"
          name="username"
          label="账号"
          placeholder="请输入账号"
          required
        />
        <van-field
          v-model="form.password"
          name="password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          required
        />
        <van-field
          v-model="form.confirmPassword"
          name="confirmPassword"
          type="password"
          label="确认密码"
          placeholder="请再次输入密码"
          required
        />
        <div class="btn-group">
          <van-button type="primary" native-type="submit" @click="onSubmit">注册</van-button>
          <van-button type="default" @click="goLogin">已有账号</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { register } from "@/api/user";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        confirmPassword: "",
      },
    };
  },
  methods: {
    /* 注册表单提交 */
    onSubmit() {
      if (
        !this.form.username ||
        !this.form.password ||
        !this.form.confirmPassword
      ) {
        this.$toast({
          message: "请填写完整信息",
          type: "danger",
        });
        return;
      }
      if (this.form.password !== this.form.confirmPassword) {
        this.$toast({
          message: "两次输入的密码不一致",
          type: "danger",
        });
        return;
      }
      console.log("注册表单提交:", this.form);
    },
    /* 跳转至登录页面 */
    goLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
/* 容器样式 */
.container {
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
}
/* logo样式 */
.logo {
  text-align: center;
  margin: 50px 0;
}
/* logo图片样式 */
.logo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
/* 表单样式 */
.form-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 按钮组样式 */
.btn-group {
  margin-top: 20px;
  display: flex;
  gap: 15px;
}
</style>  